<template>
  <div class="app-container">
    <!-- 奖励流水 -->
    <h5 class="titleInfo">奖励流水</h5>
    <div class="divTable">
      <el-form class="form" ref="form"  label-width="130px">
        <!-- 列表 -->
        <el-row v-for="(i,index) in list" :key="index">
          <el-col :span="7">
            <el-form-item :label="i.awardType | awardType">
              <span
                v-if="i.userResponseDTO.realname&&i.userResponseDTO.username"
                class="spanToInput"
              >
                {{i.userResponseDTO.realname}}
                {{i.userResponseDTO.username}}
              </span>
              <span v-else class="spanToInput">暂无</span>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="级别">
              <span class="spanToInput">{{i.roleResponseDTO.roleName | filterNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="比例">
              <span class="spanToInput">{{i.rewardRate}}%</span>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 新增 -->
        <el-row v-if="flag">
          <el-col :span="7">
            <el-form-item label="奖励类型">
              <el-select placeholder="请选择" v-model="form.awardType">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="电话">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="比例">
              <el-input v-model="form.rewardRate" type="number">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button style="margin-bottom:30px;margin-left:20px" type="primary" @click="submitFn">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-button style="margin-bottom:30px;margin-left:20px" type="primary" @click="addFn()">新增奖励流水</el-button>
  </div>
</template>
<script>
import { listUserRewards, updateUserRewardTrans } from "@/api/subsidyManage";
export default {
  name: "rewardEdit",
  data() {
    return {
      amount: null,
      form: {},
      list: [],
      flag: false,
      options: []
    };
  },
  filters: {
    roleFn(e) {
      return window.helper.roleFn(String(e));
    },
    awardType(e) {
      return window.helper.awardType(e);
    },
    filterNull(e) {
      if (e == null) {
        return "暂无";
      } else {
        return e;
      }
    }
  },
  inject: ["reload"],
  mounted() {
    this.form.id = Number(this.$route.query.id);
    this.form.orderId = String(this.$route.query.ids);
    this.amount = Number(this.$route.query.amount);
    this.getList();
    this.options = window.helper.awardType("listReturn");
  },
  methods: {
    addFn() {
      this.flag = true;
    },
    submitFn() {
      this.form.amount = (this.amount * this.form.rewardRate) / 100;
      let datas = this.form;
      console.log(datas);
      updateUserRewardTrans(datas)
        .then(res => {
          if (!res.data.code) {
            this.reload();
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    getList() {
      let datas = {
        id: this.form.id,
        pageNum: 1,
        pageSize: 10000
      };
      listUserRewards(datas)
        .then(res => {
          console.log(res);
          if (!res.data.code) {
            this.list = res.data.data.list;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px !important;
}
.divTable {
  padding: 0 20px 20px 20px;
}
.app-container /deep/ .el-input__inner{
    width: 100%;
}
</style>